<script setup>
import Toast from '@vant/weapp/dist/toast/toast';
import newLoading from '@/components/newLoading/index.vue';
import { getImageByTaskId, getAiImgRecordInfo } from "@/api/painting";

import startCreateTask from './initiateTask'
import { usePaintingStore } from '@/store'

import { ref } from 'vue';
import { onLoad, onUnload } from '@dcloudio/uni-app';


const paintingStore = usePaintingStore()


// 页面携带参数
const queryItem = ref({})
// 加载
const loading = ref(false)
// 加载ref
const loadingRef = ref(null);
// 任务ID
const taskId = ref('')
// 定时器
let timer = null


// 复制提示词
function copyFn() {
  uni.setClipboardData({
    data: queryItem.value.promptContent,
    success: function () {
      uni.getClipboardData()
    }
  })
}


// 图片预览
function previewImageFn(item) {
  uni.previewImage({
    urls: queryItem.value.imgPath,
    current: item
  })
}


// 获取任务状态
async function getImageByTaskIdFn() {
  const res = await getImageByTaskId(taskId.value)
  if (res.data.state === 1) {
    clearInterval(timer);
    await loadingRef.value.completeLoading()
    queryItem.value = Object.assign(queryItem.value, res.data)
    queryItem.value.imgPath = queryItem.value.imgPath.split(";");

  } else if (![3, 4].includes(res.data.state)) {
    clearInterval(timer);
    const errorMessage = res.data?.remark.split('失败原因：')[1]
    Toast.fail(errorMessage);
    loading.value = false
  }
}


// 重新生成
async function continueFn() {
  clearInterval(timer);
  try {
    loading.value = true
    taskId.value = await startCreateTask(queryItem.value.modelTypeId)
    timer = setInterval(() => {
      getImageByTaskIdFn()
    }, 5000);
  } catch (error) {
    loading.value = false
  }
}

// 获取详情信息
async function getAiImgRecordInfoFn() {
  const res = await getAiImgRecordInfo(queryItem.value.id)
  queryItem.value = Object.assign(queryItem.value, res.data)
  queryItem.value.imgPath = res.data.imgPath.split(";")

}


// 保存图片
function saveImgFn() {
  paintingStore.accredit({ path: queryItem.value.imgPath })
}


// 加载关闭事件
function loadingClose() {
  clearInterval(timer);
}


onUnload(() => {
  clearInterval(timer);
  loading.value = false
})


onLoad((e) => {
  if (e.item) {
    queryItem.value = JSON.parse(e.item);
    getAiImgRecordInfoFn()
  }
})
</script>

<template>
  <div class='paintingResultPage'>
    <NavBar>{{ queryItem?.title }}</NavBar>
    <div class="container">
      <div class="img_box">
        <img :src="item" alt="" mode="aspectFill" class="imgSty" :class="{ more: queryItem?.imgPath?.length >= 2 }"
          v-for="item of queryItem?.imgPath" @click="previewImageFn(item)" />
      </div>
      <div class="info_box">
        <div class="label" v-if="queryItem?.promptContent">提示词
          <i class="iconfont ai-icon-fuzhi" @click="copyFn"></i>
        </div>
        <div class="text" v-if="queryItem?.promptContent" @click="copyFn">{{ queryItem?.promptContent }}</div>

        <div class="label" v-if="queryItem?.style">风格</div>
        <div class="text" v-if="queryItem?.style">{{ queryItem?.style }}</div>

        <div class="label">绘画信息</div>
        <div class="text">
          <span>画布尺寸</span>
          <span class="num">{{ queryItem?.size }}</span>
        </div>
        <div class="text">
          <span>绘图时间</span>
          <span class="num">{{ queryItem?.createTime }}</span>
        </div>

      </div>
    </div>
    <div class="footer">
      <div class="footer_placeholder"></div>
      <div class="footer_content">
        <div class="left" @click="continueFn" v-if="queryItem.modelTypeId">重新生成</div>
        <div class="right" @click="saveImgFn">保存图片</div>
      </div>
    </div>
  </div>
  <van-toast id="van-toast" />
  <newLoading ref="loadingRef" v-model="loading" :duration="10000" :label="['排队中，预计等待15秒']" @close="loadingClose">
  </newLoading>
</template>

<style lang='scss' scoped>
.paintingResultPage {
  .container {
    padding: 0 30rpx 30rpx;

    &::-webkit-scrollbar {
      display: none;
    }

    .img_box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 20rpx;
      margin-top: 32rpx;

      .imgSty {
        flex-shrink: 0;
        display: block;
        width: 100%;
        height: 916rpx;
        border-radius: 15rpx;

        &.more {
          width: 335rpx;
          height: 448rpx;
        }
      }
    }


    .info_box {
      margin-top: 32rpx;
      color: var(--a-one-text-color);

      .label {
        font-size: 24rpx;
        margin-top: 32rpx;
        display: flex;
        align-items: center;
        position: relative;

        .iconfont {
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%);
          font-size: 28rpx;
          color: var(--a-one-text-color);
        }

        &::before {
          content: "";
          display: inline-block;
          width: 12rpx;
          height: 18rpx;
          background: var(--a-main-color);
          margin-right: 10rpx;
          border-radius: 6rpx;
        }
      }

      .text {
        font-size: 28rpx;
        color: var(--a-one-text-color);
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 16rpx;

        .num {
          font-size: 24rpx;
          color: #FFFFFF;
        }
      }
    }
  }

  .footer {
    .footer_placeholder {
      height: 176rpx;
    }

    .footer_content {
      box-sizing: border-box;
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 176rpx;
      background: var(--a-main-tabNav-bg-color);
      padding: 28rpx 30rpx 0;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      gap: 24rpx;


      .left,
      .right {
        box-sizing: border-box;
        flex-shrink: 0;
        flex: 1;
        height: 84rpx;
        border-radius: 42rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        &.left {
          color: var(--a-main-color);
          border: 1rpx solid var(--a-main-color);
        }

        &.right {
          color: var(--a-one-text-color);
          background-color: var(--a-main-color);
        }

      }

    }
  }
}
</style>